<template>
  <div class="message-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">📨 消息推送管理</span>
          <el-button type="primary" @click="handleCreate">
            <el-icon><Plus /></el-icon>
            创建推送
          </el-button>
        </div>
      </template>

      <!-- 消息统计 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <el-statistic title="今日发送" :value="1234" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="发送成功" :value="1189" value-style="color: #67c23a" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="打开率" :value="58.5" suffix="%" />
        </el-col>
        <el-col :span="6">
          <el-statistic title="点击率" :value="32.6" suffix="%" />
        </el-col>
      </el-row>

      <!-- 消息列表 -->
      <el-table :data="messageList" border stripe>
        <el-table-column prop="title" label="消息标题" width="200" />
        <el-table-column prop="type" label="消息类型" width="120">
          <template #default="{ row }">
            <el-tag>{{ getTypeName(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="channel" label="推送渠道" width="150">
          <template #default="{ row }">
            <el-tag v-for="ch in row.channels" :key="ch" size="small" style="margin-right: 5px;">
              {{ getChannelName(ch) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="targetCount" label="目标人数" width="100" />
        <el-table-column prop="successCount" label="发送成功" width="100">
          <template #default="{ row }">
            <span style="color: #67c23a;">{{ row.successCount }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="openRate" label="打开率" width="100">
          <template #default="{ row }">
            {{ row.openRate }}%
          </template>
        </el-table-column>
        <el-table-column prop="sendTime" label="发送时间" width="160" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button link type="primary" @click="handleView(row)">详情</el-button>
            <el-button link type="info" @click="handleStats(row)">数据</el-button>
            <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 创建推送对话框 -->
    <el-dialog v-model="createDialogVisible" title="创建消息推送" width="700px">
      <el-form :model="messageForm" label-width="100px">
        <el-form-item label="消息标题">
          <el-input v-model="messageForm.title" />
        </el-form-item>
        <el-form-item label="消息类型">
          <el-select v-model="messageForm.type">
            <el-option label="营销推广" value="marketing" />
            <el-option label="系统通知" value="system" />
            <el-option label="活动通知" value="activity" />
            <el-option label="账户提醒" value="account" />
          </el-select>
        </el-form-item>
        <el-form-item label="推送渠道">
          <el-checkbox-group v-model="messageForm.channels">
            <el-checkbox label="sms">短信</el-checkbox>
            <el-checkbox label="wechat">微信</el-checkbox>
            <el-checkbox label="app">APP推送</el-checkbox>
            <el-checkbox label="email">邮件</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="消息内容">
          <el-input v-model="messageForm.content" type="textarea" :rows="5" />
        </el-form-item>
        <el-form-item label="目标会员">
          <el-select v-model="messageForm.targetType">
            <el-option label="全部会员" value="all" />
            <el-option label="按等级" value="level" />
            <el-option label="按分组" value="group" />
            <el-option label="指定会员" value="specific" />
          </el-select>
        </el-form-item>
        <el-form-item label="发送时间">
          <el-radio-group v-model="messageForm.sendType">
            <el-radio label="now">立即发送</el-radio>
            <el-radio label="scheduled">定时发送</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="定时时间" v-if="messageForm.sendType === 'scheduled'">
          <el-date-picker
            v-model="messageForm.scheduledTime"
            type="datetime"
            placeholder="选择时间"
            value-format="YYYY-MM-DD HH:mm"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSend">发送</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const messageList = ref([
  {
    title: '双十一大促通知', type: 'marketing', channels: ['sms', 'wechat'],
    targetCount: 8956, successCount: 8734, openRate: 65.3,
    sendTime: '2024-01-20 10:00', status: 'sent'
  },
  {
    title: '积分到期提醒', type: 'account', channels: ['app'],
    targetCount: 1234, successCount: 1198, openRate: 82.1,
    sendTime: '2024-01-19 09:00', status: 'sent'
  },
  {
    title: '生日祝福', type: 'activity', channels: ['wechat', 'app'],
    targetCount: 45, successCount: 0, openRate: 0,
    sendTime: '2024-01-25 08:00', status: 'scheduled'
  }
])

const rfmData = ref([
  { segment: '重要价值客户', description: '最近消费、高频率、高金额', count: 456, avgConsumption: 125678, strategy: 'VIP专属服务，高端产品推荐' },
  { segment: '重要保持客户', description: '较久消费、高频率、高金额', count: 234, avgConsumption: 98765, strategy: '定期关怀，唤醒消费' },
  { segment: '重要发展客户', description: '最近消费、低频率、高金额', count: 567, avgConsumption: 76543, strategy: '增加互动，提高频次' }
])

const createDialogVisible = ref(false)

const messageForm = reactive({
  title: '',
  type: 'marketing',
  channels: ['wechat'],
  content: '',
  targetType: 'all',
  sendType: 'now',
  scheduledTime: ''
})

const getTypeName = (type) => {
  const map = { marketing: '营销推广', system: '系统通知', activity: '活动通知', account: '账户提醒' }
  return map[type] || type
}

const getChannelName = (channel) => {
  const map = { sms: '短信', wechat: '微信', app: 'APP', email: '邮件' }
  return map[channel] || channel
}

const getStatusTag = (status) => {
  const map = { sent: 'success', scheduled: 'warning', failed: 'danger' }
  return map[status] || 'info'
}

const getStatusText = (status) => {
  const map = { sent: '已发送', scheduled: '待发送', failed: '发送失败' }
  return map[status] || status
}

const getRFMTag = (segment) => {
  if (segment.includes('重要价值')) return 'danger'
  if (segment.includes('重要')) return 'warning'
  return 'info'
}

const handleCreate = () => {
  createDialogVisible.value = true
}

const handleSend = () => {
  ElMessage.success('消息发送成功')
  createDialogVisible.value = false
}

const handleView = () => {
  ElMessage.info('查看详情')
}

const handleStats = () => {
  ElMessage.info('查看数据统计')
}

const handleDelete = () => {
  ElMessage.success('删除成功')
}

const handleRefreshRFM = () => {
  ElMessage.success('RFM分析已刷新')
}

const handleViewSegment = (row) => {
  ElMessage.info(`查看${row.segment}会员列表`)
}
</script>

<style scoped>
.message-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.stat-cards {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}
</style>

